<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>光宗耀祖 - 科技登录</title>
    <meta name="description" content="若依后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.8.0}" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){alert('未登录或登录超时。请重新登录');window.top.location=window.location};
    </script>
</head>
<body class="signin">
<!-- 粒子背景 -->
<div class="particles-container"></div>

<!-- 科技感登录面板 -->
<div class="signinpanel animate__animated animate__fadeIn">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1><img alt="[ 若依 ]" src="../static/ruoyi.png"  th:src="@{/ruoyi.png}" width="121" height="75" class="logo-img"></h1>
                </div>
                <div class="m-b"></div>
                <h4 class="animate__animated animate__fadeInLeft">欢迎使用 <strong>光宗耀祖的代码世界</strong></h4>
                <ul class="m-b team-list">
                    <li><i class="fa fa-user-secret"></i> 管理：谢宝乐</li>
                    <li><i class="fa fa-crown"></i> 总裁：孙晓圆</li>
                    <li><i class="fa fa-coins"></i> 财务：孙梦莹</li>
                    <li><i class="fa fa-chart-line"></i> 运营：王振辉</li>
                    <li><i class="fa fa-bullhorn"></i> 宣传：王召权</li>
                    <li><i class="fa fa-tools"></i> 后勤：赵嘉铭</li>
                </ul>
                <div class="tech-stats">
                    <div class="stat-item">
                        <div class="stat-value" id="userCount">0</div>
                        <div class="stat-label">注册用户</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="loginCount">0</div>
                        <div class="stat-label">今日登录</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="visitsCount">0</div>
                        <div class="stat-label">总访问量</div>
                    </div>
                </div>
                <strong th:if="${isAllowRegister}" class="register-link">还没有账号？ <a th:href="@{/register}">立即注册&raquo;</a></strong>
            </div>
        </div>
        <div class="col-sm-5">
            <form id="signupForm" autocomplete="off" class="login-form">
                <h4 class="no-margins animate__animated animate__fadeIn">登录：</h4>
                <p class="m-t-md animate__animated animate__fadeIn">办法总比困难多</p>

                <div class="form-group animate__animated animate__fadeIn">
                    <div class="input-icon">
                        <i class="fa fa-user"></i>
                        <input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin" />
                    </div>
                </div>

                <div class="form-group animate__animated animate__fadeIn">
                    <div class="input-icon">
                        <i class="fa fa-lock"></i>
                        <input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123" />
                    </div>
                </div>

                <div class="row m-t animate__animated animate__fadeIn" th:if="${captchaEnabled==true}">
                    <div class="col-xs-6">
                        <div class="input-icon">
                            <i class="fa fa-shield-alt"></i>
                            <input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <a href="javascript:void(0);" title="点击更换验证码" class="captcha-img">
                            <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
                        </a>
                    </div>
                </div>

                <div class="checkbox-custom animate__animated animate__fadeIn" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
                    <input type="checkbox" id="rememberme" name="rememberme">
                    <label for="rememberme">记住我</label>
                </div>

                <button class="btn btn-success btn-block animate__animated animate__fadeIn" id="btnSubmit" data-loading="正在验证登录，请稍候...">
                    <span class="btn-text">登录</span>
                    <span class="btn-loader">
                        <i class="fa fa-circle-notch fa-spin"></i>
                    </span>
                </button>

                <div class="social-login animate__animated animate__fadeIn">
                    <p class="divider"><span>或使用以下方式登录</span></p>
                    <div class="social-icons">
                        <a href="#" class="social-icon wechat"><i class="fa fa-weixin"></i></a>
                        <a href="#" class="social-icon qq"><i class="fa fa-qq"></i></a>
                        <a href="#" class="social-icon weibo"><i class="fa fa-weibo"></i></a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="signup-footer">
        <div class="pull-left">
            https://gitee.com/sun-xiaoyuan123/pims5 <br>
        </div>
        <div class="tech-wave"></div>
    </div>
</div>

<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; var captchaEnabled = [[${captchaEnabled}]];</script>
<!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.0}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>

<style>
    :root {
        --primary-color: #5e72e4;  /* 主色调 - 紫色 */
        --secondary-color: #2dce89; /* 辅助色 - 绿色 */
        --accent-color: #f5365c;   /* 强调色 - 红色 */
        --dark-color: #32325d;     /* 深色 */
        --light-color: #f8f9fe;    /* 浅色背景 */
        --text-color: #525f7f;     /* 正文颜色 */
        --tech-blue: #00c6ff;      /* 科技蓝 */
        --tech-purple: #6a11cb;    /* 科技紫 */
    }

    body {
        font-family: 'Noto Serif SC', serif;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        color: white;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    /* 粒子背景 */
    .particles-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }

    .particle {
        position: absolute;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        animation: float 15s infinite ease-in-out;
    }

    @keyframes float {
        0% {
            transform: translateY(0) translateX(0);
            opacity: 0;
        }
        50% {
            opacity: 0.8;
        }
        100% {
            transform: translateY(-100vh) translateX(100px);
            opacity: 0;
        }
    }

    /* 登录面板 */
    .signinpanel {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        width: 900px;
        max-width: 95%;
        overflow: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 1;
    }

    .signinpanel:hover {
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .signinpanel::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgba(106, 17, 203, 0.1),
            rgba(0, 198, 255, 0.1)
        );
        transform: rotate(30deg);
        z-index: -1;
    }

    /* 左侧信息区 */
    .signin-info {
        background: linear-gradient(135deg, var(--tech-purple), var(--tech-blue));
        color: white;
        padding: 40px;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .signin-info::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>');
        background-size: 50px 50px;
        opacity: 0.3;
    }

    .signin-info h4 {
        font-size: 24px;
        margin-bottom: 30px;
        font-weight: 600;
        position: relative;
    }

    .signin-info h4::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 50px;
        height: 3px;
        background: white;
    }

    /* 团队列表 */
    .team-list {
        list-style: none;
        padding: 0;
        margin: 30px 0;
    }

    .team-list li {
        padding: 12px 0;
        font-size: 16px;
        position: relative;
        padding-left: 35px;
        transition: all 0.3s ease;
    }

    .team-list li:hover {
        transform: translateX(10px);
        color: var(--secondary-color);
    }

    .team-list li i {
        position: absolute;
        left: 0;
        top: 12px;
        font-size: 18px;
        color: white;
        transition: all 0.3s ease;
    }

    .team-list li:hover i {
        color: var(--secondary-color);
        transform: scale(1.2);
    }

    /* 统计信息 */
    .tech-stats {
        display: flex;
        justify-content: space-between;
        margin: 30px 0;
    }

    .stat-item {
        text-align: center;
        flex: 1;
        padding: 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        margin: 0 5px;
        transition: all 0.3s ease;
    }

    .stat-item:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-5px);
    }

    .stat-value {
        font-size: 24px;
        font-weight: 700;
        color: white;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 12px;
        opacity: 0.8;
    }

    /* 注册链接 */
    .register-link {
        display: block;
        margin-top: 20px;
    }

    .register-link a {
        color: white;
        text-decoration: none;
        font-weight: 600;
        position: relative;
    }

    .register-link a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: white;
        transition: width 0.3s ease;
    }

    .register-link a:hover::after {
        width: 100%;
    }

    /* 右侧表单区 */
    .login-form {
        padding: 40px;
        background: white;
        height: 100%;
    }

    .login-form h4 {
        font-size: 24px;
        color: var(--dark-color);
        margin-bottom: 10px;
        font-weight: 600;
    }

    .login-form p {
        color: #8898aa;
        margin-bottom: 30px;
    }

    /* 表单组 */
    .form-group {
        position: relative;
        margin-bottom: 20px;
    }

    .input-icon {
        position: relative;
    }

    .input-icon i {
        position: absolute;
        left: 15px;
        top: 15px;
        color: #adb5bd;
        transition: all 0.3s ease;
    }

    .form-control {
        height: 50px;
        border-radius: 6px;
        border: 1px solid #e9ecef;
        padding: 10px 15px 10px 45px;
        width: 100%;
        transition: all 0.3s ease;
        font-size: 14px;
    }

    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.1);
    }

    .form-control:focus + i {
        color: var(--primary-color);
    }

    /* 验证码区域 */
    .captcha-img {
        display: inline-block;
        transition: all 0.3s ease;
    }

    .captcha-img:hover {
        transform: scale(1.05);
    }

    .imgcode {
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
    }

    /* 记住我 */
    .checkbox-custom {
        margin: 20px 0;
        display: flex;
        align-items: center;
    }

    .checkbox-custom input[type="checkbox"] {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #e9ecef;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
    }

    .checkbox-custom input[type="checkbox"]:checked {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    .checkbox-custom input[type="checkbox"]:checked::after {
        content: '\f00c';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
    }

    .checkbox-custom label {
        color: #8898aa;
        cursor: pointer;
        margin-left: 10px;
    }

    /* 登录按钮 */
    #btnSubmit {
        background: linear-gradient(135deg, var(--tech-purple), var(--tech-blue));
        border: none;
        border-radius: 6px;
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 1px;
        color: white;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    #btnSubmit:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(106, 17, 203, 0.3);
    }

    #btnSubmit::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: all 0.5s ease;
    }

    #btnSubmit:hover::before {
        left: 100%;
    }

    .btn-text {
        position: relative;
        z-index: 1;
    }

    .btn-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #btnSubmit.loading .btn-text {
        opacity: 0;
    }

    #btnSubmit.loading .btn-loader {
        opacity: 1;
    }

    /* 社交登录 */
    .social-login {
        margin-top: 30px;
        text-align: center;
    }

    .divider {
        display: flex;
        align-items: center;
        color: #adb5bd;
        font-size: 12px;
        margin: 20px 0;
    }

    .divider::before, .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e9ecef;
    }

    .divider::before {
        margin-right: 10px;
    }

    .divider::after {
        margin-left: 10px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        color: white;
        font-size: 18px;
        transition: all 0.3s ease;
    }

    .social-icon.wechat {
        background: #2dce89;
    }

    .social-icon.qq {
        background: #3498db;
    }

    .social-icon.weibo {
        background: #e74c3c;
    }

    .social-icon:hover {
        transform: translateY(-5px) scale(1.1);
    }

    /* 页脚 */
    .signup-footer {
        background: #f8f9fe;
        padding: 20px;
        color: #8898aa;
        font-size: 14px;
        position: relative;
    }

    .tech-wave {
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 20px;
        background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23f8f9fe" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60-41.34,17.74-20.53,21.94-51.87,31.54-76.8Z" fill="%23f8f9fe" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23f8f9fe"/></svg>');
        background-size: cover;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .signinpanel {
            flex-direction: column;
        }

        .signin-info, .login-form {
            padding: 30px;
        }

        .signin-info {
            text-align: center;
        }

        .team-list li {
            text-align: left;
        }

        .tech-stats {
            flex-direction: column;
        }

        .stat-item {
            margin: 5px 0;
        }
    }

    /* 动画 */
    @keyframes countUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-count {
        animation: countUp 1s ease forwards;
    }

    /* 徽标动画 */
    .logo-img {
        transition: all 0.5s ease;
    }

    .logo-img:hover {
        transform: rotate(360deg) scale(1.1);
    }
</style>

<script>
    $(document).ready(function() {
        // 创建粒子背景
        function createParticles() {
            var container = $('.particles-container');
            for (var i = 0; i < 20; i++) {
                var size = Math.random() * 10 + 5;
                var posX = Math.random() * 100;
                var delay = Math.random() * 10;
                var duration = Math.random() * 10 + 10;

                var particle = $('<div class="particle"></div>').css({
                    'width': size + 'px',
                    'height': size + 'px',
                    'left': posX + '%',
                    'animation-delay': delay + 's',
                    'animation-duration': duration + 's',
                    'opacity': Math.random() * 0.5 + 0.1
                });

                container.append(particle);
            }
        }

        createParticles();

        // 数字增长动画
        function animateValue(id, start, end, duration) {
            var obj = document.getElementById(id);
            var range = end - start;
            var minTimer = 50;
            var stepTime = Math.abs(Math.floor(duration / range));
            stepTime = Math.max(stepTime, minTimer);

            var startTime = new Date().getTime();
            var endTime = startTime + duration;
            var timer;

            function run() {
                var now = new Date().getTime();
                var remaining = Math.max((endTime - now) / duration, 0);
                var value = Math.round(end - (remaining * range));
                obj.innerHTML = value;
                if (value == end) {
                    clearInterval(timer);
                }
            }

            timer = setInterval(run, stepTime);
            run();

            // 添加动画类
            $(obj).addClass('animate-count');
        }

        // 模拟统计数据
        animateValue('userCount', 0, 1286, 2000);
        animateValue('loginCount', 0, 342, 1500);
        animateValue('visitsCount', 0, 8924, 2500);

        // 登录按钮加载效果
        $('#btnSubmit').on('click', function() {
            var btn = $(this);
            if (!btn.hasClass('loading')) {
                btn.addClass('loading');

                // 模拟登录过程
                setTimeout(function() {
                    btn.removeClass('loading');
                }, 3000);
            }
        });

        // 验证码点击刷新
        $('.captcha-img').on('click', function() {
            var img = $(this).find('img');
            var src = img.attr('src');
            img.attr('src', src.split('?')[0] + '?' + Math.random());

            // 添加点击动画
            $(this).addClass('animate__animated animate__pulse');
            setTimeout(function() {
                $('.captcha-img').removeClass('animate__animated animate__pulse');
            }, 1000);
        });

        // 输入框聚焦动画
        $('.form-control').on('focus', function() {
            $(this).parent().find('i').addClass('animate__animated animate__pulse');
        });

        $('.form-control').on('blur', function() {
            $(this).parent().find('i').removeClass('animate__animated animate__pulse');
        });

        // 页面加载动画
        $('.animate__animated').each(function(i) {
            $(this).css('animation-delay', (i * 0.1) + 's');
        });
    });
</script>
</body>
</html>